<template>
  <div id="contain">
    <div class="cardBox">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"> 登录</span>
          <el-form
            :model="login"
            label-width="100px"
            style="width: 600px"
            ref="loginRef"
          >
            <el-form-item label="手机号" prop="loginName" :rules="{ required: true }">
              <el-input type="text" v-model="login.loginName" @keydown.enter.native="loginFn"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" :rules="{ required: true }">
              <el-input type="password" v-model="login.password" @keydown.enter.native="loginFn"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loginFn">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册">
          <el-form
            :model="regist"
            label-width="120px"
            style="width: 600px"
            ref="regisRef"
            :rules="regisRule"
          >
            <el-form-item label="注册身份" :rules="{ required: true }">
              <el-select v-model="regist.roleId" placeholder="请选择">
                <el-option label="旅客" value="3"></el-option>
                <el-option label="商家" value="2"></el-option>
                <!-- <el-option label="管理员" value="1"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input type="text" v-model="regist.mobile"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="regist.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="pwd2">
              <el-input type="password" v-model="pwd2"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="regisFn">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-button type="text" style="float: bottom" @click="back2Home">返回首页</el-button>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var phone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (!/^[1]([3-9])[0-9]{9}$/.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    var pwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var pwd2 = (rule, value, callback) => {
      if (!this.pwd2) {
        callback(new Error("请再次输入密码"));
      } else if (this.pwd2 !== this.regist.password) {
        console.log(this.pwd2, this.regist.password);
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      regist: {},
      login: {},
      pwd2: "",
      // loginRule:
      //   loginName: [{ required: true, validator: phone, trigger: "blur" }],
      //   password: [{ required: true, validator: pwd, trigger: "blur" }],
      // },
      regisRule: {
        role: [{ required: true, message: "请选择活动区域", trigger: "blur" }],
        mobile: [{ required: true, validator: phone, trigger: "blur" }],
        password: [{ required: true, validator: pwd, trigger: "blur" }],
        pwd2: [{ required: true, validator: pwd2, trigger: "blur" }],
      },
    };
  },
  methods: {
    back2Home () {
      this.$router.push('/')
    },
    loginFn() {
      // this.$refs.loginRef.validate((valid) => {
      //   if (valid) {
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: "请输入手机号或密码",
      //     });
      //   }
      // });
      this.$axios.post("/sys/user/login", this.login).then((res) => {
        if (res.data.code === 0) {
          console.log(res.data.roleType);
          window.localStorage.setItem("token", res.data.token);
          if (res.data.roleType === 1) {
            this.$router.push("/manage");
          }
          if (res.data.roleType === 2) {
            this.$router.push("/business");
          }
          if (res.data.roleType === 3) {
            this.$router.push("/");
          }
          this.login={}
        } else if (res.data.code === 500) {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    regisFn() {
      this.$refs.regisRef.validate((valid) => {
        if (valid) {
          // console.log(this.regist);
          this.$axios.post("/sys/user/sign", this.regist).then((res) => {
            if (res.data.code === 0) {
              this.$message({
                type: "success",
                message: "注册成功！",
              });
              this.regist={}
            }
            if (res.data.code === 500) {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          });
        }
      });
    },
  },
};
</script>
<style  scoped>
#contain {
  width: 100%;
  height: 100vh;
  background-color: #6ac5b9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardBox {
  width: 700px;
  height: 400px;
}
</style>>
